<template>
<section style="padding: 0;">
<div class="log-background">
    <!-- 标题 -->
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                热泵SaaS系统监控大屏
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>
    </div>
    <!-- 内容 -->
    <div style="padding: 20px 50px;display: flex;">
        <!-- 左边 -->
        <div style="width: 20%;">
            <div class="border" style="height: 20vh;">
                <div class="border-r"></div>
                <div class="title">设备在线离线</div>
                <div style="display: flex;position: relative;">
                    <div id="onlineChar" style="width:100%; height:14vh;z-index: 1;"></div>
                    <div style="width:40%;text-align: center;position: absolute;right: 0;font-size: 14px;">
                        <div>在线：{{diveceNetwork.online}}</div>
                        <div>离线：{{diveceNetwork.offline}}</div>
                        <div>总数：{{Number(diveceNetwork.online)+Number(diveceNetwork.offline)}}</div>
                    </div>
                </div>
            </div>
            <div class="border" style="height: 25vh;margin-top: 10px;">
                <div class="border-r"></div>
                <div class="title">经销商省份分布</div>
                <div id="sellcity" style="width:100%; height:19vh;z-index: 1;"></div>
            </div>
            <div class="border" style="height: 35vh;margin-top: 10px;">
                <div class="border-r"></div>
                <div class="title">经销商列表</div>
                <div class="scroll">
                    <list-scroll class="box" :speed="0.5" v-if="deviceList.length>10">
                      <div class="list">
                        <div class="item" v-for="item in deviceList" :key="item.company_id">
                          <span>{{ item.name }}</span>
                          <span>{{ item.sum }}（台）</span>
                        </div>
                      </div>
                    </list-scroll>
                <div class="list" v-else>
                    <div class="item" v-for="item in deviceList" :key="item.company_id">
                      <span>{{ item.name }}</span>
                        <span>{{ item.sum }}（台）</span>
                    </div>
                  </div>
                  </div>
            </div>
        </div>
        <!-- 中间地图 -->
        <div style="width: 60%;">
            <div ref="bdmap" id="bdmap" style="width: 97%;height: 82vh;overflow: hidden;margin: auto;"></div>
        </div>
        <!-- 右边 -->
        <div style="width: 20%;">
            <div class="border" style="height: 20vh;">
                <div class="border-r"></div>
                <div class="title">告警统计</div>
                <div style="display: flex;position: relative;">
                    <div id="orderChar" style="width:100%; height:14vh;z-index: 1;"></div>
                    <div style="width:40%;text-align: center;position: absolute;right: 0;font-size: 14px;">
                        <!-- <div>已处理：{{workOrder.processed}}</div>
                        <div>未处理：{{workOrder.unhandled}}</div>
                        <div>总数：{{Number(workOrder.processed)+Number(workOrder.unhandled)}}</div> -->
                        <div>一般：{{alarm_count.level0}}</div>
                        <div>严重：{{alarm_count.level1}}</div>
                        <div>紧急：{{alarm_count.level2}}</div>
                        <div>总数：{{alarm_count.total}}</div>
                    </div>
                </div>
            </div>
            <div class="border" style="height: 25vh;margin-top: 10px;">
                <div class="border-r"></div>
                <div class="title">设备销售统计</div>
                <div id="cellDetail" style="width:100%; height:19vh;z-index: 1;"></div>
            </div>
            <div class="border" style="height: 35vh;margin-top: 10px;">
                <div class="border-r"></div>
                <div class="title">告警通知列表</div>
                <div class="scroll">
                    <list-scroll class="box" :speed="0.5" v-if="alarmLists.length>6">
                      <div class="alarmlist-fa">
                        <div class="alarmlist" v-for="item in alarmLists" :key="item.id">
                          <div style="font-size: 18px;">类型：<span :style="{color: item.level==3? 'red': item.level==2? 'yellow':'#00d8ff'}">{{item.levelText}}</span> </div>
                          <div>{{item.triggerText}}</div>
                        </div>
                      </div>
                    </list-scroll>
                    <div class="alarmlist-fa" v-else>
                        <div class="alarmlist" v-for="item in alarmLists" :key="item.id">
                          <div style="font-size: 18px;">类型：<span :style="{color: item.level==3? 'red': item.level==2? 'yellow':'#00d8ff'}">{{item.levelText}}</span> </div>
                          <div>{{item.triggerText}}</div>
                        </div>
                      </div>
                  </div>
            </div>
        </div>
    </div>
</div>
</section>
</template>

<script>
import echarts from "echarts";
import china from "@/mock/china.json"
import ListScroll from "@/components/AutoScroll" //自动滚动
import { get_countDeviceType, get_device_sales, get_company_device,get_countLevel } from "../../api/index"
import { get_location_count, getConversationCount  } from "../../api/hdpi/indexs"
import { alarm_log_query } from '../../api/api';
export default{
    components:{
        ListScroll
    },
    data(){
        return{
            // testlist:new Array(20).fill(1).map((s, i) => ({ xh: i + 1, label: "hello wrold" })),
            testlist:new Array(20).fill(1).map((s, i) => ({ xh: "经销商名称", label: "10" })),
            alarmLists:[
            // {
            //     levelText:'紧急告警',
            //     triggerText:'发现被积雪掩埋',
            //     level:'2',
            //     id:'1'
            // },{
            //     levelText:'一般告警',
            //     triggerText:'天气不好影响外机使用',
            //     level:'0',
            //     id:'2'
            // },{
            //     levelText:'严重告警',
            //     triggerText:'设备老化导致无法使用',
            //     level:'1',
            //     id:'3'
            // },{
            //     levelText:'一般告警',
            //     triggerText:'设备启动缓慢',
            //     level:'0',
            //     id:'4'
            // },{
            //     levelText:'一般告警',
            //     triggerText:'设备制暖能力下降',
            //     level:'0',
            //     id:'5'
            // },{
            //     levelText:'紧急告警',
            //     triggerText:'外机发烫严重',
            //     level:'2',
            //     id:'6'
            // },{
            //     levelText:'紧急告警',
            //     triggerText:'外机发现严重破损',
            //     level:'2',
            //     id:'7'
            // },{
            //     levelText:'一般告警',
            //     triggerText:'发现被积雪掩埋',
            //     level:'0',
            //     id:'8'
            // },{
            //     levelText:'一般告警',
            //     triggerText:'发现被积雪掩埋',
            //     level:'0',
            //     id:'9'
            // },{
            //     levelText:'一般告警',
            //     triggerText:'发现被积雪掩埋',
            //     level:'0',
            //     id:'10'
            // }
            ],
            companyList:[{ //经销商列表
                name:"君煌有限公司",
                num:"100",
                id:"1"
            },{
                name:"鸣泽有限公司",
                num:"300",
                id:"2"
            },{
                name:"鸣泽有限公司",
                num:"50",
                id:"3"
            },{
                name:"辉建有限公司",
                num:"500",
                id:"4"
            },{
                name:"柯兴有限公司",
                num:"300",
                id:"5"
            },{
                name:"振正有限公司",
                num:"350",
                id:"6"
            },{
                name:"九墅有限公司",
                num:"230",
                id:"7"
            },{
                name:"超广有限公司",
                num:"180",
                id:"8"
            },{
                name:"快驰有限公司",
                num:"120",
                id:"9"
            },{
                name:"凡驹有限公司",
                num:"600",
                id:"10"
            },{
                name:"坤彩有限公司",
                num:"500",
                id:"11"
            },{
                name:"卫勇有限公司",
                num:"800",
                id:"12"
            },{
                name:"肯飞有限公司",
                num:"1000",
                id:"13"
            },{
                name:"振瑾有限公司",
                num:"2000",
                id:"14"
            },{
                name:"巨筑有限公司",
                num:"300",
                id:"15"
            },{
                name:"郴毅有限公司",
                num:"5800",
                id:"16"
            },],
            pointMap:'',//地图
            onlineChar: '',//在线离线统计图
            diveceNetwork:{//设备在线离线情况
                // online: '850',
                // offline: '730',
                online: '0',
                offline: '0',
            },
            cellcityChar: '',//经销商省份分布
            orderChar: '',//工单统计图
            workOrder:{//工单
                processed:'10',//已处理
                unhandled:'20',//未处理
            },
            cellDetailChar:'',//设备销售统计
            provinceList:[],//省份列表
            timeslot:[],//选择月份的时间段
            activateList:[],//激活数组
            salesedList:[],//销售数组
            warehouseList:[],//生产数组
            deviceDateList:[],//设备销售统计的日期数组
            deviceList: [],//设备数量列表
            alarm_count:"",
        }
    },
    created(){
        // console.log('我进来了');
        let that = this
        let {startTime,endTime} = that.deafultStartTime()
        that.timeslot = [startTime,endTime]
        that.getonOffline()
        that.locationCount()
        that.conversationCount()
        that.getDeviceSales()
        that.getCompanyDeviceNum()
        this.getAlarmList()
        this.getAlarmlogCount()
        setTimeout(() => {
            // that.drawOnlineChar()
            // that.drawOrderChar()
            // that.drawCellDetail() 
            that.allDeviceMap()
        }, 500); 
       
    },
    mounted(){
        var _this = this
        window.onresize = () => {
        return (() => {
          _this.onlineChar.resize();
          _this.cellcityChar.resize();
          _this.orderChar.resize();
          _this.cellDetailChar.resize();
        })()
      }
    },
    methods:{
        // 告警统计
        getAlarmlogCount(){
            get_countLevel().then(res => {
                    if(res.code == 0){
                    this.alarm_count = res.data
                    this.drawOrderChar()
                }
            })
        },
        getAlarmList(){
            alarm_log_query().then(res => {
                console.log(res);
                this.alarmLists = res.data.list
            })
        },
        //经销商设备数量
        getCompanyDeviceNum(){
            get_company_device().then(res => {
                console.log(res);
                this.deviceList = res.data.list
            })
        },
        //默认当前时间前一年的时间
        deafultStartTime(){
            var date = new Date();
            var year = date.getFullYear();
            var month = (date.getMonth()+1).toString().padStart(2,'0');
            var preYear = parseInt(year)-1
            var preMonth = (date.getMonth()+2).toString().padStart(2,'0');
            // var preYear = date.getFullYear();
            // var preMonth = (date.getMonth()).toString().padStart(2,'0');
            // if(preMonth=='00'){
            //     preYear = parseInt(preYear)-1
            //     preMonth = 12
            // }
            // var day = date.getDate().toString().padStart(2,'0');
            var startTime = preYear+'-'+preMonth+'-01';
            var endTime = year+'-'+month+'-01';
            let dataParams = {
                startTime,
                endTime
            }
            return dataParams
        },
        //设备销售统计
        getDeviceSales(){
            let para = {
                startDate: this.timeslot[0],
                endDate: this.timeslot[1]
            }
            get_device_sales(para).then(res => {
                console.log(res);
                // console.log(JSON.stringify(res.data.activate));
                this.deviceDateList = res.data.activate.map(item => {return item.days})
                this.activateList = res.data.activate.map(item => {return item.sums})
                this.salesedList = res.data.salesed.map(item => {return item.sums})
                this.warehouseList = res.data.warehouse.map(item => {return item.sums})
                this.drawCellDetail()
                // console.log(this.deviceDateList);
                // console.log(this.activateList);
                // console.log(this.salesedList);
                // console.log(this.warehouseList);
            })
        },
        //获取在线离线数量
        getonOffline(){
            get_countDeviceType().then(res=>{
                // console.log(res);
                this.diveceNetwork.online = res.data.onlineCount
                this.diveceNetwork.offline = res.data.offlineCount
                this.drawOnlineChar()
            })
        },
        //工单统计
        conversationCount(){
            getConversationCount().then(res => {
                console.log(res);
            })
        },
        //统计每个省的设备数量
        locationCount(){
            get_location_count().then(res=>{
                console.log(res);
                this.provinceList = this.changeMapData(res.data) 
                this.drawSellCity()
                console.log(this.provinceList);
            })
        },
        //把接口拿到的各省份数据格式修改成适应框架的
        changeMapData(data){
            return data.map(item => {
                return {
                    // name: item.name.slice(0,item.name.length-1),//后台数据是“广东省”，这边需要把“省”字去掉
                    name: item.name.slice(0,item.name.indexOf('省')),//后台数据是“广东省”，这边需要把“省”字去掉
                    value: item.count
                }
            })
        },
        //设备各点分布图
        allDeviceMap(lats,lngs) {
            //lats和lngs是点击设备的时候传的位置信息，如果没有默认未long
            var th = this;
            // let longitude = 114.753297;//河源
            // let latitude = 23.795719;
            let longitude = 103.783909;
            let latitude = 36.074518;
            if(lats && lngs){
                longitude = lngs
                latitude = lats
            }
            this.pointMap = new BMap.Map(this.$refs.bdmap); // 创建Map实例
            // this.pointMap.setMapStyleV2({     
            //     styleId: '099b4e737301cf7c908a0aaa26ff5dac'
            // });
            var mapStyle = {
            features: ["road", "building", "water", "land"], //隐藏地图上的"poi",
            style: "midnight",
            };

            this.pointMap.setMapStyle(mapStyle);
            let pt1 = new BMap.Point(longitude,latitude);
            // this.pointMap.centerAndZoom(pt1, 5);
            if(lats && lngs){
                this.pointMap.centerAndZoom(pt1, 16);
            }else{
                this.pointMap.centerAndZoom(pt1, 5);
            }
            
            this.pointMap.enableScrollWheelZoom();
            // var MAX = 10;
            // var markers = [];
            // var pt = null;
            // for (let i =0; i < MAX; i++) {
            // pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
            // markers.push(new BMap.Marker(pt));
            // }
            // console.log(markers);
            // let that = this
            // that.pointMap.addEventListener("tilesloaded", function () {
            //     var markerClusterer = new BMapLib.MarkerClusterer(that.pointMap, {markers:markers});
            // })
            // var markerClusterer = new BMapLib.MarkerClusterer(this.pointMap, {markers:markers});
            // // console.log(this.options)
            // var markerClusterer = null;
            const data = [
                {
                    long: "103.783909",
                    lat: "36.074518",
                },{
                    long: "108.783909",
                    lat: "37.174518",
                },{
                    long: "108.178390",
                    lat: "37.024518",
                },{
                    long: "108.783909",
                    lat: "37.034518",
                },{
                    long: "108.909",
                    lat: "37.044518",
                },{
                    long: "108.783909",
                    lat: "37.574518",
                },{
                    long: "108.21909",
                    lat: "38.074518",
                },{
                    long: "108.9091",
                    lat: "39.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "108.1",
                    lat: "37.074518",
                },{
                    long: "109.1",
                    lat: "37.074518",
                },{
                    long: "118.1",
                    lat: "37.074518",
                },{
                    long: "100.1",
                    lat: "37.074518",
                },{
                    long: "107.1",
                    lat: "37.074518",
                },{
                    long: "105.1",
                    lat: "35.074518",
                },{
                    long: "104.1",
                    lat: "36.074518",
                },{
                    long: "103.1",
                    lat: "38.074518",
                },{
                    long: "100.1",
                    lat: "25.074518",
                },{
                    long: "100.1",
                    lat: "25.174518",
                },{
                    long: "100.1",
                    lat: "25.274518",
                },{
                    long: "114.082519",
                    lat: "22.625035",
                },{
                    long: "114.182519",
                    lat: "22.625035",
                },{
                    long: "114.382519",
                    lat: "22.625035",
                },{
                    long: "115.382519",
                    lat: "22.625035",
                },{
                    long: "114.482519",
                    lat: "22.625035",
                },{
                    long: "114.682519",
                    lat: "22.625035",
                },
            ];
            // 遍历坐标点
            const markers = data.map(item => {
                // 坐标点经纬度
                const point = new BMap.Point(item.long, item.lat);
                // this.pointMap.addOverlay(new BMap.Marker(point));
                return new BMap.Marker(point);
            });
            console.log(markers);
            var markerClusterer = new BMapLib.MarkerClusterer(this.pointMap, {
                markers: markers
            });
            // markerClusterer.setMaxZoom(20);
            // markerClusterer.setMinClustrSize(15)//设置最小的聚合级别，小于该数量的不能成为一个聚合，默认为2
            // markerClusterer.setMaxZoom(15);//设置最大的聚合级别，大于该级别就不进行相应的聚合
           

            // 遍历坐标点
            // const markers = data.map(item => {
            //     // 坐标点经纬度
            //     const point = new BMap.Point(item.long, item.lat);
            //     // 配置放大后单个点的自定义图标
            //     const myIcon = new BMap.Icon('放大后单个点的图片地址', new BMap.Size(20, 20));
            //     // 设置图标大小
            //     myIcon.setImageSize(new BMap.Size(20, 20))
            //     return new BMap.Marker(point, {icon: myIcon});
            // });
            // // 添加点聚合效果
            // let markerClusterer = new BMapLib.MarkerClusterer(map, {
            //     markers: markers,
            //     // 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
            //     minClusterSize: 2,
            //     styles: [{
            //         url: '点聚合时自定义图片地址',
            //         size: new BMap.Size(42, 42)
            //     }]
            // });
        },
        // 设备在线离线统计图
        drawOnlineChar(){
            this.onlineChar = echarts.init(document.getElementById('onlineChar'));
            this.onlineChar.setOption({
                grid: {
                    x: '10%',
                    y: '19%',
                    height: '60%'
                },

                tooltip: {
                    position: 'right',
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical',
                //     right: '10%',
                //     textStyle:{
                //         color: "#fff"
                //     }
                // },
                series: [{
                    name: "设备在线离线",
                    type: "pie",
                    // radius: ["50%", "85%"],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: "center"
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        color: function (params) {
                            //自定义颜色
                            var colorList = [
                            '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        }
                    },
                    data: [{
                        value: this.diveceNetwork.online,
                        name: "在线设备"
                    },{
                        value: this.diveceNetwork.offline,
                        name: "离线设备"
                    }]
                }]
            });
        },
        //经销商省份分布
        drawSellCity(){
            console.log(this.provinceList);
            function randomData() {
                return Math.round(Math.random()*500);
            }
            // var mydata = [
            //     {name: '北京',value: randomData() },{name: '天津',value: randomData() },
            //     {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
            //     {name: '河北',value: randomData() },{name: '河南',value: randomData() },
            //     {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
            //     {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData()},
            //     {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
            //     {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
            //     {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
            //     {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
            //     {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
            //     {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData()},
            //     {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
            //     {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
            //     {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
            //     {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
            //     {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
            //     {name: '香港',value: randomData() },{name: '澳门',value: randomData() }
            // ];
            echarts.registerMap("china", china);
            this.cellcityChar = echarts.init(document.getElementById('sellcity'));
            this.cellcityChar.setOption({
                title: {
                    // text: '犯罪人口来源分析',
                    textStyle:{color:'#fff'},
                    //subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                visualMap: {
                    show : false,
                    x: 'left',
                    y: 'bottom',
                    //layoutCenter:['30%','30%'],
                    splitList: [ 
                        {start: 500, end:600},{start: 400, end: 500},
                        {start: 300, end: 400},{start: 200, end: 300},
                        {start: 100, end: 200},{start: 0, end: 100},
                    ],
                    color: ['#ff0', '#ffff00', '#0E94EB','#6FBCF0', '#F0F06F', '#00CC00']
                },
                series: [{
                    name: '经销商省份分布',
                    type: 'map',
                    mapType: 'china', 
                    roam: true,
                    zoom: 1.7,
                    top: '29%',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    // data:mydata
                    data: this.provinceList
                }]
            })
            // this.cellcityChar = echarts.init(document.getElementById('sellcity'));
            // this.cellcityChar.setOption({
            //     tooltip: {
            //         trigger: 'axis',
            //         axisPointer: {
            //             type: 'shadow'
            //         }
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     xAxis: [
            //         {
            //         type: 'category',
            //         data: ['西藏', '甘肃', '贵州', '青海', '宁夏', '内蒙古', '新疆'],
            //         axisTick: {
            //             alignWithLabel: true
            //         },
            //         axisLine: {
            //             lineStyle: {
            //                 color: '#bedbf9'
            //             }
            //         }
            //         }
            //     ],
            //     yAxis: [
            //         {
            //         type: 'value',
            //         axisLine: {
            //             lineStyle: {
            //                 color: '#bedbf9'
            //             }
            //         }
            //         }
            //     ],
            //     series: [
            //         {
            //         itemStyle: {
            //             normal: {
            //                 color: '#00d8ff'
            //             }
            //         },
            //         name: '经销商数量',
            //         type: 'bar',
            //         barWidth: '60%',
            //         data: [10, 52, 200, 334, 390, 330, 220]
            //         }
            //     ]
            // })
        },
        //工单列表
        drawOrderChar(){
            this.orderChar = echarts.init(document.getElementById('orderChar'));
            this.orderChar.setOption({
                grid: {
                    x: '10%',
                    y: '19%',
                    height: '60%'
                },

                tooltip: {
                    position: 'right',
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical',
                //     right: '10%',
                //     textStyle:{
                //         color: "#fff"
                //     }
                // },
                series: [{
                    name: "设备在线离线",
                    type: "pie",
                    radius: ["50%", "85%"],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: "center"
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        color: function (params) {
                            //自定义颜色
                            // var colorList = [
                            // '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
                            // '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            // '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                            // ];
                            var colorList = ['#1e93a9','#bdbd1c','#bd1919']
                            return colorList[params.dataIndex]
                        }
                    },
                    data:[{
                        value: this.alarm_count.level0,
                        name: "一般告警"
                    },{
                        value: this.alarm_count.level1,
                        name: "严重告警"
                    },{
                        value: this.alarm_count.level2,
                        name: "紧急告警"
                    }]
                    // data: [{
                    //     value: this.workOrder.processed,
                    //     name: "已处理"
                    // },{
                    //     value: this.workOrder.unhandled,
                    //     name: "未处理"
                    // }]
                }]
            });
        },
        //销售情况统计（生产/销售/激活）
        drawCellDetail(){
            this.cellDetailChar = echarts.init(document.getElementById('cellDetail'));
            this.cellDetailChar.setOption({
                legend: {
                    textStyle:{
                        color: '#bedbf9'
                    }
                },
                tooltip: {},
                xAxis: { 
                    type: 'category',
                    // data: ['2022-9','2022-10', '2022-11', '2022-12', '2023-1', '2023-2'],
                    data: this.deviceDateList,
                    axisLine: {
                        lineStyle: {
                            color: '#bedbf9'
                        }
                    }
                },
                yAxis: {
                    axisLine: {
                        lineStyle: {
                            color: '#bedbf9'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        name: '生产',
                        // data: [89.3, 92.1, 94.4,89.3, 92.1, 94.4],
                        data: this.warehouseList,
                        color: ['#5470c6']
                    },
                        {
                        type: 'bar',
                        name: '销售',
                        // data: [35.8, 49.4, 51.2,95.8, 89.4, 81.2],
                        data: this.salesedList,
                        color: ['#91cc75']
                    },
                    {
                        type: 'bar',
                        name: '激活',
                        // data: [97.7, 83.1, 92],
                        // data: [33.8, 45.4, 48.2,95.8, 80.4, 75.2],
                        data: this.activateList,
                        color: ['#fac858']
                    }
                ]
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         type: 'shadow'
                //     }
                // },
                // grid: {
                //     left: '3%',
                //     right: '4%',
                //     bottom: '3%',
                //     containLabel: true
                // },
                // xAxis: [
                //     {
                //     type: 'category',
                //     data: ['生产', '销售', '激活'],
                //     axisTick: {
                //         alignWithLabel: true
                //     },
                //     axisLine: {
                //         lineStyle: {
                //             color: '#bedbf9'
                //         }
                //     }
                //     }
                // ],
                // yAxis: [
                //     {
                //     type: 'value',
                //     axisLine: {
                //         lineStyle: {
                //             color: '#bedbf9'
                //         },
                //     }
                //     }
                // ],
                // series: [
                //     {
                //     itemStyle: {
                //         normal: {
                //             color: '#00d8ff',
                //             barBorderRadius:[20,20,0,0]
                //         }
                //     },
                //     name: '销售统计',
                //     type: 'bar',
                //     barWidth: '60%',
                //     data: [300, 200, 80]
                //     }
                // ]
            })
        }
    },
}
</script>

<style scoped>
    .box {
        height: 30vh;
    }
    .list {
        padding: 0 10px;
        width: 70%;
        margin: auto;
        /* width: 300px; */
    }
    .list .item {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        cursor: pointer;
        z-index: 1;
        font-size: 16px;
    }
    .list .item:hover {
        background-color: #95a5a6;
    }
    .log-background{
        background: url(../../assets/hdpi/bg.png) no-repeat;
        background-size: cover;
        font-size: .16rem;
        color: #ffffff;
        position: relative;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        font-family: myFirstFont !important;
        cursor: url(../../assets/hdpi/pointer.png) 8 3, auto !important;
    }
    .fl{
        float: left;
    }
    .header{
        width: 100%;
        height: 11vh;
        /* background: red; */
    }
    .header .header-left {
        width: 25%;
        height: 10vh;
        color: white;
        text-align: center;
        line-height: 10vh;
    }
    .header .header-right {
        width: 25%;
        height: 10vh;
    }
    .header .header-center {
        width: 50%;
        height: 10vh;
        position: relative;
    }
    .header .header-center .header-title {
        text-align: center;
        color: #ffffff;
        font-size: 40px;
        text-shadow: 0 0 5px #00d8ff;
        /* line-height: 30px; */
        line-height: 8vh;
    }
    .header .header-img {
        background: url(../../assets/hdpi/head.gif) no-repeat center center;
        background-size: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        /* top: 25px; */
        top: 40px;
    }
    .header .header-bottom {
        width: calc(100% - 100px);
        height: 1vh;
        background: url(../../assets/hdpi/header.png) no-repeat;
        /* background-size: calc(100% - 50px) 100%; */
        background-size: 100% 100%;
        margin-left: 50%;
        transform: translateX(-50%);
    }
    .border{
        position: relative;
        border: 1px solid #0bc4e9;
        background: rgba(0,72,115,0.28);
        transition: all 1s;
        /* height: 20vh; */
    }
    .border:before {
        content: '';
        position: absolute;
        width: 80%;
        height: 100%;
        bottom: -1px;
        top: -1px;
        left: 10%;
        border-bottom: 1px solid #007297;
        border-top: 1px solid #007297;
        transition: all 0.5s;
    }
    .border:after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 1px;
        height: 80%;
        /* left: -1px; */
        right: -1px;
        top: 10%;
        /* border-left: 1px solid #007297; */
        border-right: 1px solid #007297;
        transition: all 0.5s;
    }
    .border-r{
        position: absolute;
        display: inline-block;
        width: 1px;
        height: 80%;
        left: -1px;
        /* right: -1px; */
        top: 10%;
        border-left: 1px solid #007297;
        /* border-right: 1px solid #007297; */
        transition: all 0.5s;
    }
    .title{
        text-align: center;
        text-shadow: 0 0 5px #00d8ff;
        padding: 10px 0;
    }
    .alarmlist{
        padding: 10px 0;
        border-bottom: 1px dashed;
    }
    .alarmlist:hover {
        background-color: #95a5a6;
    }
    .alarmlist-fa{
        width: 90%;
        margin: auto;
    }
</style>